<template>
  <div>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <!-- <chart-card :loading="loading" title="账户" total="￥126,560">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">周同比</span>
              12%
            </trend>
            <trend flag="down">
              <span slot="term">日同比</span>
              11%
            </trend>
          </div>
          <template slot="footer">日均销售额<span>￥ 234.56</span></template>
</chart-card> -->
<a-card :loading="loading" title="账户">
    <div>
        <a-statistic title="账户余额（元）" :value="112233" style="margin-right: 50px" :precision="2" />
        <a-statistic title="累计发放环保金（元）" :precision="2" :value="12345" />
    </div>
    <div><span style="color: red;">余额已低于100元</span>，回收机已全部离线，无法运营。请及时充值</div>
</a-card>
</a-col>
<a-col :sm="14" :md="14" :xl="14" :style="{ marginBottom: '24px' }">
    <!-- <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
        <h1 style="margin: 20px;">运营数据</h1>
        <div class="salesCard">
            <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
                <div class="extra-wrapper" slot="tabBarExtraContent">
                    <div class="extra-item">
                        <a>投递</a>
                        <a>人数</a>
                        <a>重量</a>
                        <a>清运</a>
                    </div>
                </div>
                <a-tab-pane loading="true" tab="查看月度数据" key="1">
                    <a-row>
                        <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                            <bar :data="barData" title="销售额排行" />
                        </a-col>
                        <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                            <rank-list title="运营累计数据" :list="rankList" />
                        </a-col>
                    </a-row>
                </a-tab-pane>
                <a-tab-pane tab="查看7天数据" key="2">
                    <a-row>
                        <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                            <bar :data="barData2" title="销售额趋势" />
                        </a-col>
                        <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                            <rank-list title="运营累计数据" :list="rankList" />
                        </a-col>
                    </a-row>
                </a-tab-pane>
            </a-tabs>
        </div>
    </a-card> -->
    <a-card style="width:100%" title="运营数据" :tab-list="tabList" :active-tab-key="key" @tabChange="key => onTabChange(key, 'key')">
        <span slot="customRender" slot-scope="item"> <a-icon type="home" />{{ item.key }} </span>
        <!-- <a slot="extra" href="#">More</a> -->
        <!-- {{ contentList[key] }} -->
        <div ref="chart" style="width:100%;height:300px"></div>
    </a-card>
    <!-- <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
        <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
        </a-tooltip>
        <div>
            <mini-area />
        </div>
        <template slot="footer">日访问量<span> {{ '1234' | NumberFormat }}</span></template>
    </chart-card> -->
</a-col>
<!-- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
    <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
        <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
        </a-tooltip>
        <div>
            <mini-bar />
        </div>
        <template slot="footer">转化率 <span>60%</span></template>
    </chart-card>
</a-col> -->
<!-- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
    <chart-card :loading="loading" title="运营活动效果" total="78%">
        <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
        </a-tooltip>
        <div>
            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
        </div>
        <template slot="footer">
            <trend flag="down" style="margin-right: 16px;">
              <span slot="term">同周比</span>
              12%
            </trend>
            <trend flag="up">
              <span slot="term">日环比</span>
              80%
            </trend>
          </template>
    </chart-card>
</a-col> -->
</a-row>



<div class="antd-pro-pages-dashboard-analysis-twoColLayout" :class="!isMobile && 'desktop'">
    <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card :loading="loading" :bordered="false" title="线上热门搜索" :style="{ height: '100%' }">
                <a-dropdown :trigger="['click']" placement="bottomLeft" slot="extra">
                    <a class="ant-dropdown-link" href="#">
                        <a-icon type="ellipsis" />
                    </a>
                    <a-menu slot="overlay">
                        <a-menu-item>
                            <a href="javascript:;">操作一</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a href="javascript:;">操作二</a>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
                <a-row :gutter="68">
                    <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
                        <number-info :total="12321" :sub-total="17.1">
                            <span slot="subtitle">
                    <span>搜索用户数</span>
                            <a-tooltip title="指标说明" slot="action">
                                <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
                            </a-tooltip>
                            </span>
                        </number-info>
                        <!-- miniChart -->
                        <div>
                            <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
                        </div>
                    </a-col>
                    <a-col :xs="24" :sm="12" :style="{ marginBottom: ' 24px'}">
                        <number-info :total="2.7" :sub-total="26.2" status="down">
                            <span slot="subtitle">
                    <span>人均搜索次数</span>
                            <a-tooltip title="指标说明" slot="action">
                                <a-icon type="info-circle-o" :style="{ marginLeft: '8px' }" />
                            </a-tooltip>
                            </span>
                        </number-info>
                        <!-- miniChart -->
                        <div>
                            <mini-smooth-area :style="{ height: '45px' }" :dataSource="searchUserData" :scale="searchUserScale" />
                        </div>
                    </a-col>
                </a-row>
                <div class="ant-table-wrapper">
                    <a-table row-key="index" size="small" :columns="searchTableColumns" :dataSource="searchData" :pagination="{ pageSize: 5 }">
                        <span slot="range" slot-scope="text, record">
                  <trend :flag="record.status === 0 ? 'up' : 'down'">
                    {{ text }}%
                  </trend>
                </span>
                    </a-table>
                </div>
            </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card class="antd-pro-pages-dashboard-analysis-salesCard" :loading="loading" :bordered="false" title="销售额类别占比" :style="{ height: '100%' }">
                <div slot="extra" style="height: inherit;">
                    <!-- style="bottom: 12px;display: inline-block;" -->
                    <span class="dashboard-analysis-iconGroup">
                <a-dropdown :trigger="['click']" placement="bottomLeft">
                  <a-icon type="ellipsis" class="ant-dropdown-link" />
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a href="javascript:;">操作一</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="javascript:;">操作二</a>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </span>
                    <div class="analysis-salesTypeRadio">
                        <a-radio-group defaultValue="a">
                            <a-radio-button value="a">全部渠道</a-radio-button>
                            <a-radio-button value="b">线上</a-radio-button>
                            <a-radio-button value="c">门店</a-radio-button>
                        </a-radio-group>
                    </div>

                </div>
                <h4>销售额</h4>
                <div>
                    <!-- style="width: calc(100% - 240px);" -->
                    <div>
                        <v-chart :force-fit="true" :height="405" :data="pieData" :scale="pieScale">
                            <v-tooltip :showTitle="false" dataKey="item*percent" />
                            <v-axis />
                            <!-- position="right" :offsetX="-140" -->
                            <v-legend dataKey="item" />
                            <v-pie position="percent" color="item" :vStyle="pieStyle" />
                            <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
                        </v-chart>
                    </div>

                </div>
            </a-card>
        </a-col>
    </a-row>
</div>
</div>
</template>

<script>
    import moment from 'moment'
    import {
        ChartCard,
        MiniArea,
        MiniBar,
        MiniProgress,
        RankList,
        Bar,
        Trend,
        NumberInfo,
        MiniSmoothArea
    } from '@/components'
    import {
        baseMixin
    } from '@/store/app-mixin'
    import * as echarts from 'echarts';

    const barData = []
    const barData2 = []
    for (let i = 0; i < 12; i += 1) {
        barData.push({
            x: `${i + 1}月`,
            y: Math.floor(Math.random() * 1000) + 200
        })
        barData2.push({
            x: `${i + 1}月`,
            y: Math.floor(Math.random() * 1000) + 200
        })
    }

    const rankList = []
    for (let i = 0; i < 7; i++) {
        rankList.push({
            name: '白鹭岛 ' + (i + 1) + ' 号店',
            total: 1234.56 - i * 100
        })
    }

    const searchUserData = []
    for (let i = 0; i < 7; i++) {
        searchUserData.push({
            x: moment().add(i, 'days').format('YYYY-MM-DD'),
            y: Math.ceil(Math.random() * 10)
        })
    }
    const searchUserScale = [{
        dataKey: 'x',
        alias: '时间'
    }, {
        dataKey: 'y',
        alias: '用户数',
        min: 0,
        max: 10
    }]

    const searchTableColumns = [{
        dataIndex: 'index',
        title: '排名',
        width: 90
    }, {
        dataIndex: 'keyword',
        title: '搜索关键词'
    }, {
        dataIndex: 'count',
        title: '用户数'
    }, {
        dataIndex: 'range',
        title: '周涨幅',
        align: 'right',
        sorter: (a, b) => a.range - b.range,
        scopedSlots: {
            customRender: 'range'
        }
    }]
    const searchData = []
    for (let i = 0; i < 50; i += 1) {
        searchData.push({
            index: i + 1,
            keyword: `搜索关键词-${i}`,
            count: Math.floor(Math.random() * 1000),
            range: Math.floor(Math.random() * 100),
            status: Math.floor((Math.random() * 10) % 2)
        })
    }

    const DataSet = require('@antv/data-set')

    const sourceData = [{
        item: '家用电器',
        count: 32.2
    }, {
        item: '食用酒水',
        count: 21
    }, {
        item: '个护健康',
        count: 17
    }, {
        item: '服饰箱包',
        count: 13
    }, {
        item: '母婴产品',
        count: 9
    }, {
        item: '其他',
        count: 7.8
    }]

    const pieScale = [{
        dataKey: 'percent',
        min: 0,
        formatter: '.0%'
    }]

    const dv = new DataSet.View().source(sourceData)
    dv.transform({
        type: 'percent',
        field: 'count',
        dimension: 'item',
        as: 'percent'
    })
    const pieData = dv.rows

    export default {
        name: 'Analysis',
        mixins: [baseMixin],
        components: {
            ChartCard,
            MiniArea,
            MiniBar,
            MiniProgress,
            RankList,
            Bar,
            Trend,
            NumberInfo,
            MiniSmoothArea
        },
        data() {
            return {
                loading: true,
                rankList,

                // 搜索用户数
                searchUserData,
                searchUserScale,
                searchTableColumns,
                searchData,

                barData,
                barData2,

                //
                pieScale,
                pieData,
                sourceData,
                pieStyle: {
                    stroke: '#fff',
                    lineWidth: 1
                },
                tabList: [{
                    key: 'tab1',
                    tab: '查看月度数据',
                    // scopedSlots: {
                    //     tab: 'customRender'
                    // },
                }, {
                    key: 'tab2',
                    tab: '查看7天数据',
                }, ],
                contentList: {
                    tab1: `<div ref="chart" style="width:100%;height:300px"></div>`,
                    tab2: `<div ref="chart" style="width:100%;height:300px"></div>`,
                },
                tabListNoTitle: [{
                    key: 'article',
                    tab: 'article',
                }, {
                    key: 'app',
                    tab: 'app',
                }, {
                    key: 'project',
                    tab: 'project',
                }, ],
                key: 'tab1',
                noTitleKey: 'app',
            }
        },
        mounted() {

        },
        created() {
            setTimeout(() => {
                this.getEchartData()
                this.loading = !this.loading
            }, 1000)
        },
        methods: {
            onTabChange(key, type) {
                console.log(key, type);
                this[type] = key;
            },
            getEchartData() {
                const chart = this.$refs.chart
                if (chart) {
                    const myChart = echarts.init(chart)
                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['投递', '人数', '重量', '清运']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '投递',
                            type: 'line',
                            stack: 'Total',
                            data: [320, 332, 301, 334, 390, 330, 320]
                        }, {
                            name: '人数',
                            type: 'line',
                            stack: 'Total',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        }, {
                            name: '重量',
                            type: 'line',
                            stack: 'Total',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        }, {
                            name: '清运',
                            type: 'line',
                            stack: 'Total',
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }]
                    }
                    myChart.setOption(option)
                    window.addEventListener("resize", function() {
                        myChart.resize()
                    })
                }
                this.$on('hook:destroyed', () => {
                    window.removeEventListener("resize", function() {
                        myChart.resize();
                    });
                })
            }
        },
    }
</script>

<style lang="less" scoped>
    .extra-wrapper {
        line-height: 55px;
        padding-right: 24px;
        .extra-item {
            display: inline-block;
            margin-right: 24px;
            a {
                margin-left: 24px;
            }
        }
    }
    
    .antd-pro-pages-dashboard-analysis-twoColLayout {
        position: relative;
        display: flex;
        display: block;
        flex-flow: row wrap;
    }
    
    .antd-pro-pages-dashboard-analysis-salesCard {
        height: calc(100% - 24px);
        /deep/ .ant-card-head {
            position: relative;
        }
    }
    
    .dashboard-analysis-iconGroup {
        i {
            margin-left: 16px;
            color: rgba(0, 0, 0, .45);
            cursor: pointer;
            transition: color .32s;
            color: black;
        }
    }
    
    .analysis-salesTypeRadio {
        position: absolute;
        right: 54px;
        bottom: 12px;
    }
</style>